<template>
  <div
    class="dought-chart"
    ref="doughtchart"
    :style="styleObj"
  ></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
export default {
  name: "DoughtChart",
  props: {
    data: {
      type:Array
    },
    height:{
      type: String,
      default: '600px'
    },
    width:{
      type: String,
      default: '100%'
    }
  },
  setup(props) {
    const doughtchart = ref(null);

    const {data,height,width} = props

    const styleObj = {
      height: height,
      width: width
    }

    const option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: data,
        },
      ],
    };

    onMounted(() => {
      const chart = echarts.init(doughtchart.value);
      chart.setOption(option);
      window.addEventListener('resize', function () { 
          chart.resize()
      })
    });

    return { doughtchart,styleObj };
  },
};
</script>

<style>
</style>